<!--  -->
<template>
  <div :class="{ backanimation: isAnimation }">
    <nav-bar class="nav-bar">
      <div slot="left" @click="backClick"><icon icon="#icon-arrow-down" /></div>
      <div slot="center">{{ songInfo.name }}</div>
      <div slot="right"></div>
    </nav-bar>

    <div class="logo" v-show="false"><img :src="songInfo.img" alt="" /></div>
    <lyric :lyric="lyric" @lyricBtnTime="lyricBtnTime" />

    <div class="time" ref="time">
      <span>{{ currentTime }}</span>
      
      <div
        class="progress-bar"
        ref="progressBar"
        @touchstart="barTouch"
        @touchmove="barTouch"
      >
        <div class="bar-inner" ref="barInner">
          <div class="progress" :style="{ width: progressWidth }"></div>
          <div class="progress-btn" :style="{ left: progressWidth }"></div>
        </div>
      </div>

      <span>{{ songInfo.time | endTime(this) }}</span>
    </div>

    <div class="control">
      <div class="item">
        <span v-for="(item, index) in playMode" @click="modeClick(index)">
          <icon :icon="item" v-show="index == isMode" />
        </span>
      </div>
      <div class="item" @click="previousIndex">
        <icon icon="#icon-shangyishoushangyige" />
      </div>
      <div class="item play" @click="playClick">
        <icon icon="#icon-zanting1" v-show="isShow" />
        <icon icon="#icon-bofang" v-show="!isShow" />
      </div>
      <div class="item" @click="nextClick">
        <icon icon="#icon-xiayigexiayishou" />
      </div>
      <div class="item" @click="ListClick"><icon icon="#icon-caidan" /></div>
    </div>
    <play-list ref="playList" v-show="this.$store.state.isPlayList"></play-list>
    <audio ref="audioRef" autoplay :src="url" @timeupdate="upDateTime"></audio>
  </div>
</template>

<script>
import NavBar from "@/components/common/navBar/NavBar";
import PlayList from "./playerChild/PlayList";
import Lyric from "./playerChild/Lyric.vue";
import Icon from "@/components/content/icon/Icon.vue";
import {
  getSongDetail,
  getSongUrl,
  getLyric,
  songInfo,
} from "@/network/player.js";
export default {
  name: "SongDetail",
  data() {
    return {
      id: 0, //歌曲id
      url: "", //歌曲url
      lyric: "", //歌词
      songInfo: {}, //歌曲信息
      isShow: true,
      currentTime: "00:00", //当前时间
      endTime: "00:00", // 结束时间
      progress: 0, //前进量比
      progressBarWidth: 0, //进度条宽度
      progressBarOffset: 0, //进度条距离body的偏移量
      ended: false, //播放是否结束
      isPlayList: false, //显示列表
      playMode: ["#icon-xunhuanbofang", "#icon-suijibofang", "#icon-xunhuan"], //播放方式: 随机，列表,单曲
      isMode: 0, //默认为随机播放
      isflag: true, //节流阀
      isAnimation: false, //动画
    };
  },
  components: {
    NavBar,
    Icon,
    PlayList,
    Lyric,
  },
  updated() {
    if (this.$refs.audioRef.ended) this.ended = true;
  },
  watch: {
    //播放结束
    ended() {
      this.ended = false;
      if (this.isflag) {
        this.isflag = false;
        this.$store.state.isMode == 2
          ? this.$refs.audioRef.load()
          : this.nextClick();
      } else {
        setTimeout(() => {
          this.isflag = true;
        }, 1000);
      }
    },
    //
    $route(to, from) {
      this.id = this.$route.params.ids;
      this.getSongDetail(this.id);
      this.getSongUrl(this.id);
      this.getLyric(this.id);
      this.$nextTick(() => {
        this.progressBarWidth = this.$refs.progressBar.clientWidth;
        this.progressBarOffset =
          this.$refs.progressBar.offsetLeft + this.$refs.time.offsetLeft;
      });
      this.isAnimation = false;
    },
  },
  created() {
    this.id = this.$route.params.ids;
    this.getSongDetail(this.id);
    this.getSongUrl(this.id);
    this.getLyric(this.id);
  },
  mounted() {
    this.$nextTick(() => {
      this.progressBarWidth = this.$refs.progressBar.clientWidth;
      this.progressBarOffset =
        this.$refs.progressBar.offsetLeft + this.$refs.time.offsetLeft;
    });
    this.isAnimation = false;
  },
  computed: {
    progressWidth() {
      return this.progress * this.progressBarWidth + "px";
    },
  },
  methods: {
    //当前播放位置
    upDateTime(e) {
      this.currentTime = this.getTime(e.target.currentTime * 1000);
      this.progress = (e.target.currentTime / this.songInfo.time) * 1000;
      this.$store.commit("getCurrentTime", {
        currentTime: e.target.currentTime,
      });
    },

    /**
     * 监听事件
     */
    
    barTouch(e) {
      //点击的位置
      const touchWidth = e.targetTouches[0].pageX - this.progressBarOffset;
      this.$refs.audioRef.currentTime =
        (touchWidth / this.progressBarWidth) * this.$refs.audioRef.duration;
    },
    //播放
    playClick() {
      if (this.$refs.audioRef.paused) {
        this.$refs.audioRef.play();
        this.isShow = true;
      } else {
        this.$refs.audioRef.pause();
        this.isShow = false;
      }
    },
    //歌词播放按钮
    lyricBtnTime(playTime) {
      this.$refs.audioRef.currentTime = playTime
    },
    //下一首
    nextClick() {
      this.$store.commit("nextIndex");
    },
    //上一首
    previousIndex() {
      this.$store.commit("previousIndex");
    },
    //列表
    ListClick() {
      this.$store.commit("isPlayList", this.isPlayList);
      this.isPlayList = this.$store.state.isPlayList;
    },
    //播放方式
    modeClick(index) {
      this.$store.commit("isMode", {
        index,
      });
      this.isMode = this.$store.state.isMode;
    },
    //返回
    backClick() {
      this.$router.push("/home")
      this.isAnimation = true;
    },
    /**
     * 封装时间显示方法
     */
    getTime(date) {
      const d = new Date(date);
      const m = d.getMinutes();
      const s = d.getSeconds();
      return (
        ("00" + m).substr(m.toString().length) +
        ":" +
        ("00" + s).substr(s.toString().length)
      );
    },

    /**
     * 网络请求
     */
    getSongDetail(ids) {
      getSongDetail(ids).then((res) => {
        this.songInfo = new songInfo(res.songs[0]);
        console.log(this.songInfo);
      });
    },
    getSongUrl(id) {
      getSongUrl(id).then((res) => {
        this.url = res.data[0].url;
      });
    },
    getLyric(id) {
      getLyric(id).then((res) => {
        this.lyric = res.lrc.lyric;
        this.$store.commit("getLyric", { lyric: this.lyric });
        console.log(res.lrc);
      });
    },
  },
  filters: {
    endTime(value, that) {
      if (!value) {
        return "00:00";
      }
      const _this = that._self;
      return _this.getTime(value);
    },
  },
};
</script>
<style lang='scss' scoped>
.nav-bar {
  position: relative;
}
.logo {
  position: fixed;
  width: 200px;
  height: 200px;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
}
.time {
  position: fixed;
  bottom: 90px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 10px;
  z-index: 99;
  span {
    font-size: $font-size-small-s;
  }
  .progress-bar {
    position: relative;
    height: 10px;
    width: 100%;
    margin: 0 10px;
    .bar-inner {
      position: relative;
      height: 1px;
      background-color: $color-dialog-background;
      margin-top: 5px;
      .progress {
        height: 100%;
        background-color: #fff;
      }
      .progress-btn {
        position: absolute;
        top: -3px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background-color: #fff;
      }
    }
  }
}
.control {
  display: flex;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  margin: 0 20px;
  .item {
    flex: 1;
    text-align: center;
    font-size: $font-size-large-x;
  }
  .play {
    font-size: 50px;
  }
}
.backanimation {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  animation-name: back;
  animation-direction: 1s;
}
@keyframes back {
  0% {
    top: 0%;
  }
  25% {
    top: 25%;
  }
  50% {
    top: 50%;
  }
  100% {
    top: 100%;
  }
}
</style>